<!-- 
.vue文件格式
一定要在script里写lang=jsx 
-->
<script lang="jsx">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  // 组件逻辑
  setup() {
    // 响应式数据
    const message = ref('Hello, Vue JSX in SFC!');
    const count = ref(0);

    // 事件处理函数
    const handleClick = () => {
      count.value++;
    };

    // 返回渲染函数（JSX）
    return () => (
      <div style={{ padding: '20px' }}>
        {/* 文本渲染 */}
        <h2>{message.value}</h2>
        
        {/* 响应式数据展示 */}
        <p>点击次数: {count.value}</p>
        
        {/* 事件绑定（注意是onClick，不是@click） */}
        <button 
          onClick={handleClick}
          style={{ 
            padding: '8px 16px', 
            cursor: 'pointer',
            marginTop: '10px'
          }}
        >
          点击我
        </button>
      </div>
    );
  },
});
</script>

<!-- 样式仍用<style>标签，和普通SFC一样 -->
<style scoped>
button {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
button:hover {
  background: #f5f5f5;
}
</style>